<template>
  <div class="tn-form-item">
    <el-form-item :label="label" :prop="name">
      <el-input
        v-if="type === 1"
        v-model="currentValue"
        style="width:100%"
        :placeholder="placeholder"
        :disabled="disable"
        :readonly="readonly"
        @blur="handleTnBlur"
        @focus="handleTnFocus"
        @change="handleTnChange"
        @input="handleTnInput"
      />
      <el-radio-group
        v-if="type === 2"
        v-model="currentValue"
        style="width:100%"
        :disabled="disable"
        @change="handleTnChange"
      >
        <el-radio v-for="(item, index) in multiSelectValue" :key="name+'radio'+item+index" :label="item">{{ item }}</el-radio>
      </el-radio-group>
      <el-checkbox-group
        v-if="type === 3"
        v-model="currentValue"
        style="width:100%"
        :disabled="disable"
        @change="handleTnChange"
      >
        <el-checkbox v-for="(item, index) in multiSelectValue" :key="name+'checkbox'+item+index" :label="item">{{ item }}</el-checkbox>
      </el-checkbox-group>
      <el-select
        v-if="type === 4"
        v-model="currentValue"
        style="width:100%"
        :disabled="disable"
        @change="handleTnChange"
      >
        <el-option v-for="(item, index) in multiSelectValue" :key="name+'select'+item+index" :label="item" :value="item" />
      </el-select>
      <el-input
        v-if="type === 5"
        v-model="currentValue"
        style="width:100%"
        type="textarea"
        :placeholder="placeholder"
        :disabled="disable"
        :readonly="readonly"
        @blur="handleTnBlur"
        @focus="handleTnFocus"
        @change="handleTnChange"
        @input="handleTnInput"
      />
      <tinymce
        v-if="type === 6"
        v-model="currentValue"
        style="width:100%"
        :height="300"
        :image-dir-name="saveDirName"
        @input="handleTnInput"
      />
      <tn-upload-image-item
        v-if="type === 7"
        v-model="currentValue"
        style="width:100%"
        @change="handleTnChange"
      />
      <tn-upload-image-item
        v-if="type === 8"
        v-model="currentValue"
        :limit="4"
        style="width:100%"
        @change="handleTnChange"
      />
      <upload-file
        v-if="type === 9"
        v-model="currentValue"
        :save-dir-name="saveDirName"
        @change="handleTnChange"
      />
      <el-input-number
        v-if="type === 10"
        v-model="currentValue"
        style="width:100%"
        :disabled="disable"
        controls-position="right"
        :step="1"
        @change="handleTnChange"
      />
      <el-input-number
        v-if="type === 11"
        v-model="currentValue"
        style="width:100%"
        :disabled="disable"
        controls-position="right"
        :step="0.01"
        @change="handleTnChange"
      />
      <span class="form-item-tips">{{ tips }}</span>
    </el-form-item>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import TnUploadImageItem from '@/components/TNUploadImageItem'
import UploadFile from './components/UploadFile'

export default {
  name: 'TnFormItem',
  components: { Tinymce, TnUploadImageItem, UploadFile },
  model: {
    prop: 'value',
    event: 'changeItemValue'
  },
  props: {
    /* eslint-disable */
    label: {
      type: String,
      default: ''
    },
    name: String,
    type: {
      type: Number,
      default: 1
    },
    tips: {
      type: String,
      default: ''
    },
    value: [String, Number, Array],
    placeholder: {
      type: String,
      default: ''
    },
    disable: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    multiSelectValue: {
      type: Array,
      default: () => {
        return []
      }
    },
    saveDirName: {
      type: String,
      default: 'tn_file'
    }
  },
  data() {
    return {
      currentValue: this.value
    }
  },
  watch: {
    value(val) {
      this.currentValue = val
    }
  },
  methods: {
    handleTnInput(val) {
      this.$emit('changeItemValue', val)
      this.$emit('input', val)
    },
    handleTnChange(val) {
      this.$emit('changeItemValue', val)
      this.$emit('change', val)
    },
    handleTnBlur(event) {
      this.$emit('blur', event)
    },
    handleTnFocus(event) {
      this.$emit('focus', event)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
